<template>
  <div class="pageListWrap">
    <div class="pageTableInner">
      <div class="infoSearchWrap">
        <div class="infoSearchOne">
          <el-row :gutter="20">
            <el-col :span="5">
              <div class="searchWrap">
                <span class="searchFont">企业名称:</span>
                <span class="searchInputFont">
                   <el-select v-model="searchInfo.enterpriseNo" size="mini" @change="searchRowsInfo(true)" clearable placeholder="全部">
                    <el-option
                      v-for="item in this.$store.state.companyInfos"
                      :key="item.enterpriseNo+''"
                      :label="item.enterpriseName"
                      :value="item.enterpriseNo+''">
                    </el-option>
                  </el-select>
                </span>
              </div>
            </el-col>
            <el-col :span="5">
              <div class="searchWrap">
                <span class="searchFont">备案批次:</span>
                <span class="searchInputFont">
                    <el-input clearable size="mini" v-model="searchInfo.registerNo" @change="searchRowsInfo(true)" auto-complete="off" placeholder="备案批次"></el-input>
                </span>
              </div>

            </el-col>
            <div style="float: right;margin-right: 10px;">
              <el-button type="primary" size="mini" @click="searchRowsInfo(true)">查询</el-button>
              <el-button type="primary" size="mini" @click="$refs.addBtn.dialogOpen()">新增</el-button>
            </div>
          </el-row>
        </div>

      </div>
      <div class="tableContainer" >
        <div class="tableInner" ref="tableInnerWrap" >
          <el-table
            ref="multipleTable"
            :data="rows"
            stripe
            :height="tableHeight"
            style="width: 100%"
          >
            <el-table-column
              prop="registerNo"
              label="备案批次"
              show-overflow-tooltip>
            </el-table-column>
            <el-table-column
              prop="enterpriseName"
              label="企业名称"
            >

            </el-table-column>
            <el-table-column
              prop="registerCount"
              label="备案车辆"
            >
            </el-table-column>
            <el-table-column
              label="电子标签数量"
              prop="labelCount"
              show-overflow-tooltip
            >
            </el-table-column>
            <el-table-column
              prop="bindCount"
              label="已绑定数量"
            >
            </el-table-column>
            <el-table-column
              prop="activeCount"
              label="已激活数量"
              show-overflow-tooltip
            >
            </el-table-column>
            <el-table-column
              prop="createTime"
              label="创建时间"
              show-overflow-tooltip
            >
            </el-table-column>
           <!-- <el-table-column
              label="导出"
            >
              <template slot-scope="scope">
                <i @click='$refs.setBtn.dialogOpen(scope.row)' class="iconfont icon-bianji1"></i>
              </template>
            </el-table-column>-->
          </el-table>
        </div>
        <div class="Pagination" style="text-align: left;margin-top: 10px;">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="searchInfo.page"
            :page-sizes="[10, 30, 50, 100,200]"
            :page-size="searchInfo.rows"
            layout="total, sizes, prev, pager, next, jumper"
            :total="count">
          </el-pagination>
        </div>
      </div>
    </div>
    <addBtn ref="addBtn" @searchRowsInfo="searchRowsInfo"></addBtn>
  </div>
</template>

<script>
  import addBtn from "./addBtn.vue"
  export default {
    props: [],
    data(){
      return {
        rows: [],
        count: 0,
        //以下为搜索
        value6: "",
        tableHeight: "200",
        searchInfo: {
          "page":1,
          "rows":10,
          "enterpriseNo": "",
          "registerNo": "",
        },
      }
    },
    components: {addBtn},
    created(){
      this.searchRowsInfo()
    },
    mounted(){
      this.$nextTick(() => {
        //表格滚动
        this.tableHeight = document.querySelector(".pageListWrap").clientHeight - 155
      })
    },
    methods: {
      //下载模板
      downLoadXml(downloadPath){
        window.location.href = downloadPath
      },
      searchRowsInfo(val){
        val ?this.searchInfo.page = 1: ""
        this.axios.post(process.env.API_HOST + `/label/selectLabelAllotGrid`, this.searchInfo)
          .then(response => {
            const result = response.data
            if (result.code === 200) {
              this.rows = result.rows
              this.count = result.total
            }
          })
      },
      handleSizeChange(val) {
        this.searchInfo.rows = val
        this.searchRowsInfo()
      },
      handleCurrentChange(val) {
        this.searchInfo.page = val;
        this.searchRowsInfo()
      },
    },
  }
</script>

<style lang="stylus" rel="stylesheet/stylus">
  @import "../../../common/stylus/mixin.styl"
  .pageListWrap
    page()

</style>
